<script lang="ts" setup>//setup 
import Person from './components/Person.vue';
import MyList from './components/MyList.vue';
import { ref, shallowRef,KeepAlive } from 'vue';

// export default{
//   name:"APP",
//   components:{
//     Person,
//     MyList
//   }
// }

//component标签的属性 is=""有两种方式指定组件
//1.组件名 name
//2.直接用组件

    //keep alive vue自带的标签
    let currentComponent=shallowRef(Person)
    function changeComponent(){
        currentComponent.value=MyList
    }
    function changeComponent1(){
        currentComponent.value=Person
    }
</script>

<template>
  <h1>hello vue3</h1>
  <button @click="changeComponent1">Person</button>
  <button @click="changeComponent">MyList</button>
  <hr>
  <KeepAlive> <!-- include="Person",exclude="" -->
    <component :is="currentComponent"></component>
  </KeepAlive>
</template>

<style scoped>

</style>
